
<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          style="float: right"
          type="success"
          size="medium"
          icon="el-icon-edit"
          @click="$router.push({ name: 'questions-new' })"
          >新增试题</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          size="small"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @focus="subjectsList"
                >
                  <el-option
                    v-for="item in getsubjectsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="form.catalogID"
                  placeholder="请选择"
                  @focus="twoSubjectsList"
                >
                  <el-option
                    v-for="item in gettwoSubjectsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  v-model="form.tags"
                  placeholder="请选择"
                  @focus="tagsList"
                >
                  <el-option
                    v-for="item in gettagsList"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option label="超级管理员" value="2"></el-option>
                  <el-option label="录入管理员" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-row>
                  <el-col :span="12">
                    <el-select
                      v-model="form.province"
                      placeholder="请选择"
                      @focus="provinces"
                    >
                      <el-option
                        v-for="(item, index) in getprovinces"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select
                      v-model="form.city"
                      placeholder="请选择"
                      @focus="citys"
                    >
                      <el-option
                        v-for="(item, index) in getcitys"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button @click="emptyForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert :title="`数据一共${tableData.length}条`" type="info" show-icon>
      </el-alert>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerClass"
        class="Table_questions"
        v-loading="loading"
      >
        <el-table-column fixed prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column prop="answer" label="题干" width="280">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="preview(scope.row)" type="text" size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.chkState === '待审核' ? false : true"
              @click="choiceCheck(scope.row)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === '已下架' ? false : true"
              @click="
                $router.push({
                  name: 'questions-new',
                  query: { id: scope.row.id },
                })
              "
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="choicePublish(scope.row)"
              >{{
                scope.row.publishState === "已下架" ? "上架" : "下架"
              }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === '已下架' ? false : true"
              @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col style="text-align: right">
          <!-- total分页有几页 -->
          <el-pagination
            background
            layout=" prev, pager, next,sizes, jumper"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="SelectedData.pagesize"
            :total="SelectedData.wholepage"
            @current-change="CurrentPage"
            @size-change="Currentnumber"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <Preview
      :dialogVisible="dialogVisible"
      :onlist="onlist"
      ref="findRadio"
      @close="closePreview($event)"
    />
    <QuestionsCheck
      :onlist="onlist"
      :checkShow="checkShow"
      @checkClose="checkClose($event)"
    />
  </div>
</template>

<script>
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'
// 学科列表
import { simple as subjectsList } from '@/api/hmmm/subjects'
import { simple as subjectsDetail } from '@/api/hmmm/directorys'
// 标签列表
import { list as tagsList } from '@/api/hmmm/tags'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 类型其他数据 难度 题型 方向
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { parseTimeByString } from '@/filters/index.js' // 时间过滤器
// 引入预览弹窗组件
import Preview from '../components/questions-preview.vue'
// 引入审核对话框
import QuestionsCheck from '../components/questions-check.vue'
export default {
  components: { Preview, QuestionsCheck },
  data () {
    return {
      labelPosition: 'right',
      activeName: 'first', // 审核状态
      loading: false,
      form: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '', // 城市
        city: '' // 城市下的区域
      },
      difficulty, // 难度
      questionType, // 题型
      direction, // 方向
      getsubjectsList: [],
      gettwoSubjectsList: [],
      gettagsList: [],
      getprovinces: [], // 城市
      getcitys: [], // 城市下的区域
      tableData: [],
      // tableData: [
      //   // {
      //   //   date: "2016-05-02",
      //   //   name: "王小虎",
      //   //   province: "上海",
      //   //   city: "普陀区",
      //   //   address: "上海市普陀区金沙江路 1518 弄",
      //   //   zip: 200333,
      //   // },
      // ], // 网络请求过来的试题数据
      SelectedData: {
        // 精选试题网络请求信息
        page: 1, // 当前页码
        pagesize: 5, // 一页几条数据
        wholepage: 0, // 总共多少个试题
        chkState: null
      },
      dialogVisible: false, // 控制预览框显示与否
      checkShow: false, // 控制审核框显示与否
      onlist: {} // 预览当前项
    }
  },
  created () {
    this.Selectedquestions(this.SelectedData) // 获取全部的精选试题
  },
  methods: {
    handleClick (tab, event) {
      // 审核状态切换执行
      // console.log(tab);
      console.log(event)
      if (this.activeName === 'first') {
        this.SelectedData.chkState = null
      } else if (this.activeName === 'second') {
        this.SelectedData.chkState = 0
      } else if (this.activeName === 'third') {
        this.SelectedData.chkState = 1
      } else if (this.activeName === 'fourth') {
        this.SelectedData.chkState = 2
      }
      this.Selectedquestions(this.SelectedData) // 获取全部的精选试题
    },
    headerClass () {
      return 'background: #fafafa'
    },
    CurrentPage (page) {
      // 页码切换
      this.SelectedData.page = page
      this.Selectedquestions(this.SelectedData) // 获取全部的精选试题
    },
    Currentnumber (pagesize) {
      // 条数切换
      this.SelectedData.pagesize = pagesize
      this.Selectedquestions(this.SelectedData) // 获取全部的精选试题
    },
    search () {
      // 根据条件搜索
      const searchData = {}
      for (const item in this.form) {
        if (this.form[item]) {
          // 如果输入框中的数据不为空
          searchData[item] = this.form[item]
        }
      }
      if (searchData) {
        this.Selectedquestions(searchData)
      } else {
        this.Selectedquestions()
        // console.log(1);
      }
    },
    // 学科列表
    async subjectsList () {
      const { data } = await subjectsList()
      this.getsubjectsList = data
    },
    // 二级列表
    async twoSubjectsList () {
      if (this.form.subjectID) {
        const { data } = await subjectsDetail({
          subjectID: this.form.subjectID
        })
        this.gettwoSubjectsList = data
      }
    },
    // 标签列表
    async tagsList () {
      const {
        data: { items }
      } = await tagsList()
      this.gettagsList = items
    },
    // 城市
    provinces () {
      this.getprovinces = provinces()
      this.form.city = ''
    },
    citys () {
      this.getcitys = citys(this.form.province)
    },
    // 清空
    emptyForm () {
      this.form = {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '', // 城市
        city: '' // 城市下的区域
      }
    },
    async Selectedquestions (SelectedData) {
      // 加载中
      this.loading = true
      if (SelectedData !== this.SelectedData) {
        SelectedData = { ...this.SelectedData, ...SelectedData }
        console.log(SelectedData)
      }
      try {
        const list = await choice(SelectedData)
        // console.log(list.data);
        this.tableData = list.data.items
        this.SelectedData.wholepage = list.data.counts // 试题有几页
        this.tableData.forEach((item) => {
          if (item.questionType === '1') {
            item.questionType = '单选'
          } else if (item.questionType === '2') {
            item.questionType = '多选'
          } else if (item.questionType === '3') {
            item.questionType = '简答'
          }
          item.addDate = parseTimeByString(item.addDate)
          if (item.difficulty === '1') {
            item.difficulty = '简单'
          } else if (item.difficulty === '2') {
            item.difficulty = '一般'
          } else if (item.difficulty === '3') {
            item.difficulty = '困难'
          }
          if (item.chkState === 0) {
            item.chkState = '待审核'
          } else if (item.chkState === 1) {
            item.chkState = '已审核'
          } else if (item.chkState === 2) {
            item.chkState = '已拒绝'
          }
          if (item.publishState === 0) {
            item.publishState = '已下架'
          } else if (item.publishState === 1) {
            item.publishState = '已发布'
          }
        })
      } catch (error) {
        console.log(error)
      }
      // 获取数据不管成功或者失败都关闭加载
      this.loading = false
    },
    // 关闭预览框方法
    closePreview (event) {
      this.dialogVisible = event
      // 关闭弹窗清空数据
      this.onlist = {}
    },
    // 给预览框组件处理数据方法
    async preview (onlist) {
      try {
        // console.log(onlist)
        const { data } = await detail(onlist)
        this.onlist = data
        if (data.questionType === '1') {
          this.onlist.questionType = '单选'
        } else {
          this.onlist.questionType = '多选'
        }
        if (data.difficulty === '1') {
          this.onlist.difficulty = '简单'
        } else {
          this.onlist.difficulty = '困难'
        }
        this.$refs.findRadio.findRadio()
      } catch (error) {
        console.log(error)
      }
      // 先获取数据再打开弹窗 避免数据闪烁
      this.dialogVisible = true
    },
    // 试题审核
    choiceCheck (onlist) {
      console.log(onlist)
      console.log(onlist.chkState)
      console.log(onlist.chkState === '待审核')
      this.onlist = onlist
      this.checkShow = true
    },
    checkClose (event) {
      this.checkShow = event
      this.onlist = {}
      this.Selectedquestions(this.SelectedData)
    },
    choicePublish (onlist) {
      this.onlist = onlist
      this.$confirm(
        this.onlist.publishState === '0'
          ? '您确定要下架这道题目吗?'
          : '您确定要上架这道题目吗?',
        {
          type: 'warning'
        }
      )
        .then(async () => {
          try {
            if (onlist.publishState === '已下架') {
              this.onlist.publishState = '1'
            } else if (onlist.publishState === '已发布') {
              this.onlist.publishState = '0'
            }
            await await choicePublish(this.onlist)
            // 执行完删除接口之后重新更新数据
            this.Selectedquestions(this.SelectedData)
            this.$message.success(
              this.onlist.publishState === '0' ? '下架成功!' : '上架成功!'
            )
            this.onlist = {}
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {})
    },
    remove (onlist) {
      this.onlist.id = onlist.id
      this.$confirm('您确定要删除这道题目吗?', {
        type: 'warning'
      })
        .then(async () => {
          try {
            await await remove(this.onlist)
            // 执行完删除接口之后重新更新数据
            this.$message.success('删除成功!')
            this.Selectedquestions(this.SelectedData)
            this.onlist = {}
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .box-card {
    margin: 10px;
    .clearfix {
      margin-top: -3px;
      margin-bottom: 20px;
      span {
        color: pink;
        font-size: 12px;
      }
      .el-button {
        font-size: 12px;
        border-radius: 3px;
      }
    }
    .text.item {
      margin-top: -4px;
    }
    .Table_questions {
      margin-top: 20px;
    }
  }
}
</style>
